/*
 * @Author: liu wang wang
 * @Date: 2020-07-09 17:57:59
 * @LastEditTime: 2020-07-20 14:33:57
 * @LastEditors: liu wang wang
 * @Description: 版本信息展示组件
 * @FilePath: \st-sdk-js\src\components\Info.ts
 */
import Common from '../utils/Common';
import { appType } from '../config/index';
import { itemInterface, InfoList, infoInitInterface } from '../../types';
import api from '../api';
import msg from '../utils/Msg';
import store from '../utils/store';
class Info extends Common {
    protected theme: string = '#fff';
    protected app: string = '';
    protected canChange: number = 0;
    constructor() {
        super();
    }
    // 内容item
    protected getContentItem({ title, value }: itemInterface): HTMLElement {
        const item: HTMLElement = this.getDivofFlex();
        const tip: HTMLElement = this.getTipEle(title);
        const itemValue: HTMLElement = this.createSpan();
        itemValue.innerText = value;
        this.setStyle(itemValue, 'font-weight:bold;');
        this.setStyle(item, 'font-size:14px;');
        item.appendChild(tip);
        item.appendChild(itemValue);
        return item;
    }
    // 内容
    protected getContent(list: InfoList): HTMLElement {
        const content: HTMLElement = this.createDiv();
        const contentStyle: string = `
            width:100%;
            background:#F4F4F4;
            border-radius:4px;
            border:1px solid rgba(203,203,203,1);
            box-sizing:border-box;
            padding:20px;
        `;
        this.setStyle(content, contentStyle);
        list.map((con: itemInterface) => {
            const conitem = this.getContentItem(con);
            this.setStyle(conitem, 'margin-bottom:12px;');
            content.appendChild(conitem);
        });
        return content;
    }
    // 按钮区
    protected getBtns({ edit, setOther, versionID,success }: {versionID?:number, edit: Function, setOther: Function, success?:Function }): HTMLElement {
        const btnsBox: HTMLElement = this.createDiv();
        this.setStyle(btnsBox, 'overflow:hidden;margin-top:20px;');
        const sureBtn: HTMLElement = this.getButton({
            width: 88,
            height: 30,
            text: '确定',
            background: this.theme,
            color: '#fff',
            clickHandle: () => {
                this.close();
                success && success();
            }
        });
        const editInfoBtn: HTMLElement = this.getButton({
            width: 88,
            height: 30,
            text: '修改版本信息',
            clickHandle: () => {
                edit && edit();
            }
        })
        this.setStyle(editInfoBtn, 'float:left; border:1px solid rgba(203,203,203,1);');
        const setToOtherBtn: HTMLElement = this.getButton({
            width: 88,
            height: 30,
            text: '置为其他版本',
            clickHandle: () => {
                setOther && setOther(this.canChange);
            }
        })
        this.setStyle(setToOtherBtn, 'float:right; border:1px solid rgba(203,203,203,1);');
        const cancleBtn: HTMLElement = this.getButton({
            width: 80,
            height: 30,
            text: '取消',
            clickHandle: () => {
                this.close();
                store.getStore('close') && store.getStore('close')();
            }
        });
        this.setStyle(cancleBtn, 'border:1px solid rgba(203,203,203,1);margin-left:20px;');
        btnsBox.appendChild(sureBtn);
        if(versionID){
            this.setStyle(btnsBox, 'float:right;overflow:hidden;');
            btnsBox.appendChild(cancleBtn);
        }else{
            this.setStyle(sureBtn, 'float:left;margin-right:20px;');
            btnsBox.appendChild(editInfoBtn);
            btnsBox.appendChild(setToOtherBtn);
        }
        return btnsBox;
    }
    // 重置版本信息面板
    protected resetInfo(info: InfoList): void {
        const versionInfo = this.getContent(info);
        const versionInfoBox = document.getElementById('info-content-box');
        (versionInfoBox as HTMLElement).innerHTML = '';
        (versionInfoBox as HTMLElement).appendChild(versionInfo);
    }
    // 初始化
    public init({ theme, app, edit, setOther, zoneID, versionID, success }: infoInitInterface): HTMLElement {
        this.theme = theme;
        this.app = app;
        api.getDetail({
            params: {
                versionID: versionID,
                zoneID: zoneID || store.getStore('zoneid')
            },
            success: (res: any) => {
                if (res.code === 200) {
                    const data = res.data;
                    this.canChange = data.canChange;
                    const info: InfoList = [{
                        title: '版本名称：',
                        value: data.versionName
                    }, {
                        title: '职业数量：',
                        value: data.occupationNumName
                    }, {
                        title: '终端类型：',
                        value: data.terminalTypeName
                    }, {
                        title: '版本类型：',
                        value: data.versionTypeName
                    }, {
                        title: '版本特色：',
                        value: data.characteristicName
                    }, {
                        title: '其他标签：',
                        value: data.othersName
                    }]
                    if (data.zoneName && this.app !== appType.TOOL) {
                        (document.getElementById('game-server-name') as HTMLElement).innerText = `【${data.zoneName}${data.zoneID}】`;
                    }
                    this.resetInfo(info);
                } else {
                    msg.msg(res.message);
                }
            }
        });
        const InfoContent: HTMLElement = this.createDiv();
        this.setStyle(InfoContent, 'overflow:hidden;');
        // 工具后台
        const title: HTMLElement = this.createP();
        const titleStyle = `
            font-size: 14px; 
            margin-bottom: 15px;
        `;
        title.innerText = '工具服修改后，是否符合下列版本特征';
        this.setStyle(title, titleStyle);
        // 版本商运营商
        const titleOfTool: HTMLElement = this.createP();
        const titleOfToolStyle = `
            font-size: 14px; 
            margin-bottom: 15px;
        `;
        this.setStyle(titleOfTool, titleOfToolStyle);
        titleOfTool.innerText = '请确认工具服的版本信息：';
        const gameServerName = this.createSpan();
        gameServerName.innerText = '[黑麒英雄版工具服340963]';
        this.setStyle(gameServerName, 'font-weight:bold;');
        gameServerName.id = 'game-server-name';
        titleOfTool.appendChild(gameServerName);
        // 版本商运营商提示信息
        const tip = this.createP();
        tip.innerText = versionID ? '以上为版本商提交的版本信息，如有不同意见，请向版本商反馈。版本信息不影响开区。' : '该工具服将默认使用所选版本的信息，请谨慎选择';
        this.setStyle(tip, 'color:#E02020;font-size:12px;margin-top:10px;');
        const content: HTMLElement = this.createDiv();
        content.id = "info-content-box";
        const btns: HTMLElement = this.getBtns({versionID, edit, setOther, success });
        if (this.app === appType.TOOL) {
            InfoContent.appendChild(title);
        } else {
            InfoContent.appendChild(titleOfTool);
        }
        InfoContent.appendChild(content);
        if (this.app !== appType.TOOL) {
            InfoContent.appendChild(tip);
        }
        InfoContent.appendChild(btns);
        return InfoContent;
    }
}

export default Info;